<template>
  <div class="body">
    <!-- 说明 新增实体 -->
    <searchForm />
    <!-- tab -->
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first" />
      <el-tab-pane label="待审核" name="second" />
      <el-tab-pane label="已审核" name="third" />
      <el-tab-pane label="已拒绝" name="fourth" />
    </el-tabs>
    <!-- 数据条数 -->
    <div class="statdata">
      <i class="el-alert__icon el-icon-info" />
      <span>
        数据一共 {{ page.total }} 条
      </span>
    </div>
    <!-- 表 -->
    <el-table
      :data="province"
      style="width: 100%"
      class="tabletit"
    >
      <el-table-column
        fixed
        prop="number"
        label="试题编号"
        width="150"
      />
      <el-table-column
        prop="subject"
        label="学科"
        width="120"
      />
      <el-table-column
        prop="catalog"
        label="目录"
        width="120"
      />
      <el-table-column
        label="题型"
        width="120"
      >
        <template v-slot="scope">
          {{ scope.row.questionType | questionType }}
        </template>
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干"
        width="300"
      >
        <template v-slot="scope">
          <p v-html="scope.row.question" />
        </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="180"
      >
        <!-- 作用域插槽 -->
        <template v-slot="scope">
          {{ scope.row.addDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="100"
      >
        <template v-slot="scope">
          {{ scope.row.difficulty | difficulty }}
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="100"
      />
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="100"
      >
        <template v-slot="scope">
          {{ scope.row.chkState | chkState }}
        </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="100"
      />
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="100"
      />
      <el-table-column
        prop="publishState"
        label="发布状态"
        width="100"
      >
        <template v-slot="scope">
          {{ scope.row.publishState|publishState }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="219"
      >
        <template v-slot="scope">
          <el-button type="text" size="small" @click="topic(scope.row.id)">预览</el-button>
          <el-button type="text" size="small" @click="showAudit(scope.row.id)">审核</el-button>
          <el-button type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="putaway(scope.row.id)">上架</el-button>
          <el-button type="text" size="small" @click="deldata(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页 -->
    <el-form :inline="true" class="demo-form-inline" style="text-align: right">
      <el-form-item>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="page.page"
            :page-size="page.pagesize"
            :total="page.total"
            layout="prev,pager,next"
            background
            @current-change="changePage"
          />
        </el-row>
      </el-form-item>

      <el-form-item>
        <el-select v-model="value11" @change="yetiao">
          <el-option label="5/条页" value="5/条页" />
          <el-option label="10/条页" value="10/条页" />
          <el-option label="20/条页" value="20/条页" />
          <el-option label="50/条页" value="50/条页" />
        </el-select>
      </el-form-item>
      <el-form-item label="前往">
        <el-input v-model.number="page.page" placeholder="请输入前往页内容" @change="fn()" />
      </el-form-item>
    </el-form>
    <!-- 表格预览弹层 -->
    <topic :show-role-dialog="showRoleDialog" :oneprovince="oneprovince" @close="close" />
    <!-- 表格审核弹出层 -->
    <div class="audit">
      <el-dialog
        title="题目审核"
        :visible.sync="auditdialogVisible"
        width="30%"
      >
        <div class="auditbtn">
          <el-radio v-model="radio" label="1">通过</el-radio>
          <el-radio v-model="radio" label="2">拒绝</el-radio>
        </div>
        <div class="auditext">
          <el-input
            v-model="textarea"
            type="textarea"
            :rows="2"
            placeholder="请输入审核意见"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 表格上架弹出层 -->
    <div v-if="flag1" class="putaway" />
  </div>
</template>
<script>
import { subjects, entryPeople, getProvinceCity, delquestions, questions } from '@/api/question'
import searchForm from '../components/searchForm.vue'
import topic from './Previewtopic.vue'
export default {
  components: {
    topic,
    searchForm
  },
  data() {
    return {
      value11: '5/条页',
      page: {
        page: 1, // 当前页码
        pagesize: 5, // 每页显示的条数
        total: 0 // 服务器的总数据
      },
      flag: false,
      flag1: false,
      radio: '1',
      // radio: '2',
      textarea: '',
      showRoleDialog: false,
      auditdialogVisible: false,
      oneprovince: {},
      subjectsname: [],
      secleveldire: [],
      staff: [],
      province: [],
      city: [],
      direction: [{
        value: '选项1',
        label: 'o2o'
      }, {
        value: '选项2',
        label: '外包服务'
      }, {
        value: '选项3',
        label: '企业服务'
      }, {
        value: '选项4',
        label: '互联网金融'
      }, {
        value: '选项5',
        label: '企业咨询'
      },
      {
        value: '选项6',
        label: '互联网'
      },
      {
        value: '选项7',
        label: '电子商务'
      },
      {
        value: '选项8',
        label: '其他'
      }],
      qstype: [{
        value: '选项1',
        label: '单选'
      }, {
        value: '选项2',
        label: '多选'
      }, {
        value: '选项3',
        label: '简答'
      }],
      difficulty: [{
        value: '选项1',
        label: '简单'
      }, {
        value: '选项2',
        label: '一般'
      }, {
        value: '选项3',
        label: '困难'
      }],
      activeName2: 'first',

      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        region: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      currentPage2: 1
    }
  },
  created() {
    this.subjects(this.value)
    this.entryPeople()
    this.getProvinceCity()
  },
  methods: {
    // 预览按钮
    async topic(id) {
      this.oneprovince = await questions(id)
      console.log(this.oneprovince, '预览按钮----------')
      this.showRoleDialog = true
    },
    putaway() {
        this.$confirm('您确认上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '上架成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          })
        })
    },
    async deldata(id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?')
      await delquestions(id)
    },
    fn() {
      // console.log(76876)
      this.getProvinceCity(this.page)
    },
    // 选择一页多少条数
    yetiao() {
      if (this.value11 === '10/条页') {
        this.page.pagesize = 10
      } else if (this.value11 === '20/条页') {
        this.page.pagesize = 20
      } else if (this.value11 === '50/条页') {
        this.page.pagesize = 50
      } else if (this.value11 === '5/条页') {
        this.page.pagesize = 5
      }
      this.getProvinceCity(this.page)
    },
       // 切换分页
    changePage(newpage) {
      this.page.page = newpage
      this.getProvinceCity(this.page)
    },
    prevbtn() {
      console.log(14)
      this.dialogVisible = true
    },
    showAudit() {
      this.auditdialogVisible = true
    },

    addqs() {
      this.$router.push('/#')
    },
    onSubmit() {
      console.log('submit!')
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    preview(row) {
      console.log(row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    this.currentPage2 = val
   this.getProvinceCity(this.currentPage2)
    },
    // 学科
    async subjects() {
      this.subjectsname = await subjects()
      const sbjname = await subjects()
      this.secleveldire = sbjname
    },
    // 录入人
    async entryPeople(data) {
      const entrypeople = await entryPeople(data)
      // console.log(entrypeople.list, '131313131313131313')
      this.staff = entrypeople.list
      // console.log(this.staff);
    },
    // 地区
    async getProvinceCity(data) {
      const province = await getProvinceCity(data)
      console.log(province, '精选题库123456')
      this.province = province.items
      this.page.total = province.counts
    },
    close() {
      this.showRoleDialog = false
    }
  }
}
</script>
<style>
.body{
    padding:20px;
}
.addqs{
    font-size: 12px;
    color: pink;
}
.toptit{
    display: flex;
    justify-content: space-between;
    margin-bottom: 27px;
    position: relative;
}
.row{
    width: 100%;
}
.addbtn{
    position: absolute;
    right:14px;
}
.sel1{
    margin-right: 6px;
}
.rigbtn{
    position: absolute;
    right:13px;
    top:3px;
}
.el-icon-info{
    color:#909399;
}
.statdata{
    height: 34px;
    background-color: #f4f4f5;
    padding: 8px 16px;
    margin-bottom:15px;
}
.statdata span{
    color:#909399;
    font-size: 13px;
    margin-left: 4px;
}
/* .tabletit{
    border-bottom: 2px solid #909399;
    background-color: #fafafa;
} */
.page{
    margin-top: 20px;
    text-align: right;
}
.previewtopic{
  /* margin-top: 15vh;  */
    height: 700px;
    width: 900px;
    position: absolute;
    left: 0;
    margin:0 auto;
    background-color: black;
    border-radius: 9%;
}
.auditbtn{
  margin-bottom:31px;
}
.demo-form-inline{
  margin-top: 14px;
}
</style>
